<template>
  <!-- <div class="main"> -->
    <main class="bg-gray-200 dark:bg-gray-800">
      <!-- banner -->
      <div
        class="relative w-full h-special inline-block overflow-hidden md:mb-32"
      >
        <div
          class="
            w-full
            h-full
            bg-home-banner bg-fixed bg-center bg-no-repeat bg-cover
            filter
            dark:brightness-75
          "
        ></div>
        <div class="absolute inset-0 w-full h-full">
          <div
            class="block-left bg-gray-200 dark:bg-gray-800 hidden md:block"
          ></div>
          <div
            class="block-right bg-gray-200 dark:bg-gray-800 hidden md:block"
          ></div>
          <div class="mt-32">
            <div
              class="
                w-80
                md:w-96
                h-16
                flex
                items-center
                justify-center
                leading-10
                mx-auto
                rounded-md
                bg-gray-900 bg-opacity-50
                text-orange-100
                tracking-widest
              "
            >
              <p>南来的，北往得</p>
            </div>
            <!-- 中心图标 -->
            <ul class="flex items-center justify-center mt-6">
              <li
                v-for="(item, index) in shareIcons"
                :key="index"
                :title="item.title"
                class="
                  p-1.5
                  rounded-full
                  bg-opacity-80 bg-white
                  mx-2
                  filter
                  hover:brightness-90
                  cursor-pointer
                  transition-all
                  duration-500
                  origin-center
                "
              >
                <img class="h-5 w-5" :src="item.icon" :alt="item.title" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 最热 -->
      <div v-if="hots.length" class="main p-6 my-5">
        <div class="py-2 px-6 rounded-sm bg-gray-200 dark:bg-gray-600">
          <h2 :class="titleClass">Hot Articles</h2>
        </div>
        <ul class="flex items-center justify-center flex-wrap">
          <li
            v-for="item in hots"
            :key="item.id"
            :class="`group md:w-52 w-full my-5 mx-3 overflow-hidden relative hots rounded-lg cursor-pointer transition-all ${subtitClass}`"
            @click="goArticle(item)"
          >
            <div
              class="
                w-full
                md:w-52
                h-52
                md:h-36
                rounded-lg
                mx-auto
                bg-no-repeat bg-cover bg-cyan-300
                dark:bg-cyan-800
                filter
                blur-sm
                md:filter-none
                shadow-md
              "
              :style="`background-image:url('${item.cover}')`"
            ></div>
            <div
              class="
                md:hidden
                group-hover:block group-hover:animate-fade
                md:top-0 md:left-0 md:w-full md:h-36
                absolute
                top-7
                left-8
                w-4/5
                h-3/4
                p-3
                bg-black bg-opacity-40
                rounded-lg
              "
            >
              <h3
                :class="`w-full text-left mb-6 md:hidden inline-block break-all`"
              >
                {{ item.title }}
              </h3>
              <p
                :class="`w-full text-left mb-6 hidden md:inline-block break-all`"
              >
                {{ item.excerpt }}
              </p>
              <p>阅读量：{{ item.viewCount }}</p>
              <p>点赞数：{{ item.likeCount }}</p>
              <p>发布时间：{{ item.createdAt }}</p>
            </div>
            <p
              :class="`group-hover:brightness-90 mt-3 w-full h-10 text-center md:inline-block hidden`"
            >
              {{ item.title }}
            </p>
          </li>
        </ul>
      </div>
      <!-- 文章列表 -->
      <div class="main p-6 my-5">
        <div class="py-2 px-6 rounded-sm bg-gray-200 dark:bg-gray-600">
          <h2 :class="titleClass">New Articles</h2>
        </div>
        <div class="w-full">
          <div v-if="!hots.length && !articleLoading" :class="`m-10 text-center ${subtitClass}`">
            博主还未撰写文章，您要不等会儿再看吧~
          </div>
          <template v-if="articleLoading">
            <div v-for="item in 5" :key="item" class="animate-pulse flex space-x-4 my-9">
              <!-- <div class="rounded-full bg-blue-400 h-12 w-12"></div> -->
              <div class="flex-1 space-y-4 py-1">
                <div class="h-4 bg-blue-400 rounded w-3/4"></div>
                <div class="h-4 bg-blue-400 rounded "></div>
                <div class="space-y-4 flex items-center justify-between">
                  <span class="h-4 bg-blue-400 rounded w-2/12"></span>
                  <span class="h-4 bg-blue-400 rounded w-2/12"></span>
                </div>
              </div>
            </div>
          </template>
          <div
            v-for="item in hots"
            :key="item.id"
            class="my-9 w-full flex items-start"
          >
            <a-svg name="fire" class="text-red-600 w-6 h-6" />
            <a-tag name="置顶" class="ml-1" />
            <div class="w-full pl-5">
              <h3
                :class="`text-base tracking-wider font-semibold break-all cursor-pointer hover:brightness-75 transition-all ${titleClass}`"
                @click="goArticle(item)"
              >
                {{ item.title }}
              </h3>
              <div :class="`${subtitClass} mt-5 flex justify-between`">
                <span>阅读量：{{ item.viewCount }}</span>
                <span>发布时间：{{ item.createdAt }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div
          class="
            flex
            mt-8
            items-center
            justify-between
            text-slate-800
            dark:text-white
          "
        >
          <span
            v-show="currentPage > 1"
            class="cursor-pointer hover:brightness-75 transition-all"
            @click="changePage(-1)"
            ><a-svg
              name="arrowSmLeft"
              class="w-5 h-5 inline-block"
            />上一页</span
          >
          <span></span>
          <span
            v-show="nextTrue"
            class="cursor-pointer hover:brightness-75 transition-all"
            @click="changePage(1)"
            >下一页<a-svg name="arrowSmRight" class="w-5 h-5 inline-block"
          /></span>
        </div>
      </div>
    </main>
  <!-- </div> -->
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      titleClass:
        "text-slate-800 dark:text-white text-xl font-mono font-medium",
      subtitClass: "text-slate-800 dark:text-white text-sm",
      contentClass: "",
      shareIcons: [
        {
          icon: require("~/assets/images/index/qq.svg"),
          title: "QQ",
          link: "",
        },
        {
          icon: require("~/assets/images/index/bilibili.svg"),
          title: "哔哩哔哩动画",
          link: "",
        },
        {
          icon: require("~/assets/images/index/csdn.svg"),
          title: "CSDN",
          link: "",
        },
        {
          icon: require("~/assets/images/index/juejin.svg"),
          title: "掘金",
          link: "",
        },
        {
          icon: require("~/assets/images/index/github.svg"),
          title: "Github",
          link: "",
        },
      ],
      hots: [],
      allArticle: [],
      articleLoading: false,
      currentPage: 1,
      pageSize: 10,
      nextTrue: false,
    };
  },
  async asyncData(context) {
    let list = []
    await new Promise((resolve) => {
      return setTimeout(() => {
        list = [{
          id: "12423",
          userId: "51231",
          userName: "yocat",
          title: "按时对啊多好玩 数千万暗杀名单",
          excerpt: "asdasdadwadkoqkqowrk oqkr",
          cover: "",
          createdAt: "2020-12-12",
          viewCount: 12980,
          likeCount: 12935325,
        }]
        resolve(list)
      }, 1000)
    })
    return {hots: list, articleLoading: false};
  },
  computed: {},
  methods: {
    // 文章详情
    goArticle(item) {
      console.log(item, "item");
    },
    // 切换当前页
    changePage(page) {
      this.currentPage = this.currentPage + page;
    },
    // 获取最热文章数据
    getHots() {},
    // 获取文章列表数据
    getArticleLis() {},
  },
};
</script>
